<template>
  <div>
    <zm-panel :visible.sync="value" @change="close">
      <div slot="title">
        <div class="dib">数据简报详情{{ params.endTime ? '('+params.startTime +'~'+ params.endTime+')' : '' }}</div>
      </div>
      <zm-button type="warning" class="mb10" @click="onGetFields">
          导出
        </zm-button>
      <zm-table-data :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams" pk="id" heigth="100px">
      </zm-table-data>

      <div slot="footer">
        <el-button @click="close" type="default">关 闭</el-button>
      </div>
      <export-panel
      ref="export"
      :api="exportField()"
      v-if="exportParams.visible"
      v-model="exportParams.visible"
      type="9"
      @after="onExport"
    ></export-panel>
    </zm-panel>
  </div>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import zmTableMixin from '@/mixins/zmTableMixin'
import { dataColumns } from './const'
import ExportPanel from '@/components/exportFields'

import {dataInfoDetail,
  getExportField,
  exportDataInfoDetail} from '@/api/src/workbench'

export default {
  components: {ExportPanel},
  mixins: [panelMixin, zmTableMixin],
  props: {
    params: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {

      exportForm: {},
      exportParams: { visible: false }
    }
  },
  computed: {
    columns () {
      return dataColumns(this)
    }
  },
  methods: {
    exportApi () {
      return exportDataInfoDetail
    },
    exportField () {
      return getExportField
    },
    async loadList () {
      const res = await dataInfoDetail(
        this.assignQuery({ ...this.params })
      )
      this.initialTableData(res.list, res.count)
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    async onExport (fields) {
      this.exportForm = {
        ...this.params,
        ...{ fields: fields }
      }
      const res = await exportDataInfoDetail(this.exportForm)
      let iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      iframe.src = res.url
      iframe.onload = function () {
        document.body.removeChild(iframe)
      }
      document.body.appendChild(iframe)
      // this.$refs.export.onExport()
    },
    ontoCustomerDetail (row) {
      this.$router.push({path: '/customerList', query: { 'departmentId': row.departmentId, 'accountId': row.id }})
    },
    ontoSaleOrder (row) {
      this.$router.push({path: '/saleOrderList', query: {'accountId': row.id, searchParams: JSON.stringify(this.params)}})
    }
  }
}
</script>
